<template>
  <div>
  <van-row class="header d-flex flex-column justify-content-center">
     <van-row class="header-top ">
                <van-col span="24" style="height:80px ;">
                    <span class="span1">我的</span>
                </van-col>
            </van-row>

            <van-row class="header-botton" v-if="$store.state.isLogin">
                <van-col class="header-botton-one">
                    <van-image round width="4rem" height="4rem" :src="getImagePath(user.uavatar)"/>
                </van-col>
                <van-col span="3">
                    <span class="span2">{{ user.unickname }}</span>
                </van-col>
                <van-col class="" >
                    
                    <van-button type="primary" size="small" :icon="require('../../assets/img/修改.png')" class="modify">修改</van-button>
                </van-col>
            </van-row>
            <van-row  v-else>
                <van-col span="9" class="header-botton-one">
                    <van-image  fit="contain" round width="4rem" height="4rem" :src="require('../../assets/img/default.png')"/>
                </van-col>
                <van-col  span="" style="margin-top:14px">
                    <router-link class="span1" to="/userLogin">登录/注册</router-link>
                </van-col>
            </van-row>
      </van-row>

      <div class="content">

        <van-row class="wallet-module">
            <van-cell title="我的钱包" is-link value="进入钱包" class="wallet" />
        </van-row>
        
        <van-row>
            <van-cell title="我的红包" is-link />
            <van-cell title="我的地址" @click="isLogin"  is-link />
            <van-cell title="我的收藏" is-link />
            <van-cell title="我的评价" is-link />
            <van-cell title="客服中心"  is-link />
            <van-cell title="我的门店" v-if="isRegisterShop" @click="isLoginShopHome" is-link />
            <van-cell title="商家入驻" v-else @click="isLoginShopBusinessRegister" is-link /> <!-- 换成商家注册 -->
        </van-row>

        <van-row class="exit">
            <van-button type="primary" @click="logout" block class="exit-login">退出登录</van-button>
        </van-row>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant';
export default {
  name: 'App',
  data(){
    return{
        baseUrl: 'http://localhost:8081/images/',
        active:2,
        token:'Bearer ' + localStorage.getItem("token"),
        user:{},
        isRegisterShop:false,
        isShow:false
    }
  },
  methods:{
        logout(){
            // 退出登录
            localStorage.removeItem("token");
            this.$store.state.isLogin = false
            this.isTokn()
        },
        //拼接地址
        getImagePath(imgName){
            if (this.isShow) {
                return `${this.baseUrl}${imgName}`;
            }
        },
        //判断该用户是否注册了商家
        getShop(){
            axios.get("/api/shop/getShop",{
               params:{ uid:this.user.uid}
            })        
            .then(res => {    
                if (res.data.code === 200) {
                    console.log(res.data.data);
                    this.$store.state.shop = res.data.data;
                    res.data.data === undefined ? this.isRegisterShop = false : this.isRegisterShop = true
                }
            })        
            .catch(err => {            
                console.log(err.data)        
            }) 
        },
        isLogin(){
            if (this.$store.state.isLogin) {
                this.$router.push({path:`/myAddress`})
            } else {
                Toast("请登录!")
            }
        },
        isLoginShopHome(){
            if (this.$store.state.isLogin) {
                this.$router.push({path:`/shopHome/${this.$store.state.shop.shopId}`})
            } else {
                Toast("请登录!")
            }
        },
        isLoginShopBusinessRegister(){
            if (this.$store.state.isLogin) {
                this.$router.push({path:`/businessRegister`})
            } else {
                Toast("请登录!")
            }
        },
        // 判断有没有tokn并检查是否登录
        isTokn(){
            let token = localStorage.getItem("token") ;
            
            if(token != null) {
                this.showUserInfo();
            } else {
                this.$store.state.isLogin = false
            }
        },
        showUserInfo(){
            let that = this
            console.log(this);
            const instance = axios.create({
                baseURL: 'https://api.example.com',
                timeout: 5000,
                headers: {
                    // 设置请求头，把 token 传递给服务器程序，以便于认证
                    'Authorization': that.token
                }
            });
            // 发起请求
            instance.get('http://localhost:9090/api/user')
            .then(response => {
                // 处理响应数据
                console.log(response.data);
                if (response.data.code === 200) {
                    this.$store.state.isLogin = true
                    this.user = response.data.data;
                    this.$store.state.uid = response.data.data.uid;
                    this.getShop()
                    this.isShow = true
                } else{
                    this.$toast('你的身份已过期，请登录!')
                    
                    this.$store.state.isLogin = false
                }
            })
            .catch(error => {
                // 处理错误
                console.error(error);
            });
        },
        aa(){
            this.$store.state.active = 2 ;
        }
   },
   mounted(){
        this.aa();
        this.isTokn();
   }
}
</script>
  
<style scoped>
 *{
    margin: 0;
    padding: 0;
}
.header{
    background-color: #ffe233;
    height: 160px;
    text-align: center;
    position:sticky;
    z-index: 999;
    top:0;
}
.header .span1{
    font-size: 23px;
    color: #000;
}
.header .header-top{
    height: 80px;
    line-height: 80px;
}
.header .header-botton{
    height: 80px;
    padding: 10px;
}
.header-botton .span2{
    font-size: 20px;
    font-weight: bold;
}
.header-botton .header-botton-one{
    margin-right: 20px;
}
.header-botton .header-botton-three{
    position: relative;
    top: 28px;
    left: -40px;
}
.content .wallet-module{
    margin-bottom: 10px;
    padding-top: 10px;
}
.content .wallet-module .wallet{
    height: 140px;
}
.modify{
    border-radius:20px;
    height:20px;
    font-size:12px;
    width:70px;
    background-color:#fff098;
    border:1px solid #fff098;
    color:black;
    top:-6px;
}
.content{
    height:700px;
    background-color:#f4f4f4;
}
.exit .exit-login{
    margin-top: 10px;
    color: black;
    background-color: white;
    border: 1px solid white;
}
</style>
